{% load static %}

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>模板样例</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{% static 'bootstrap/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
    

</head>

<body>
<div class="col-sm-4 col-sm-offset-4 col-md-6 col-md-offset-3 main">
    <br>
    <br>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">员工列表</h3> <!--这里加标题 //-->
        </div>
        <div class="panel-body"> <!--将表格放在这个<div class="panel-body">的标签中 //-->

            <table class="table table-bordered table-condensed table-striped table-hover"> <!--给表格增加bootstrap样式 //-->
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>邮件</th>
                    <th>薪水</th>
                </tr>
                </thead>
                <tbody>
                {% for per in lists %}
                <tr>
                    <td>{{ per.id }}</td>
                    <td>{{ per.departname }}</td>
                    <td>{{ per.createdate }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7">无相关记录！</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {{ page_nav|safe }}
                </ul>
            </nav>

        </div>
    </div>
</div>
<script src="{% static 'bootstrap/plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'bootstrap/dist/js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'bootstrap/dist/js/bootstrap.min.js'%}"></script>
</body>
</html>